<template>
	<view id="view">
		<view class="header">
			<image :src="$util.img(data.picture)" mode="widthFix"></image>
		</view>
		<view class="title">
			<view class="title-left">
				<view class="goods-title">
					{{data.title}}
				</view>
				<view class="goods-money">
					<view class="goods-price">
						&yen;{{data.price}}
					</view>
					<view class="goods-price-old">
						&yen;{{data.original_price}}
					</view>
				</view>
			</view>
			<button open-type="share" class="title-share">
				<image src="https://cskjz.baoliy168.com/public/static/img/alliance-share.png" mode=""></image>
				<view>分享领红包</view>
			</button>
		</view>
		<view class="goods-time">
			活动结束时间：<text>{{data.endtime}}</text>
		</view>
		<!-- <view class="goods-stag">
			<view class="stag">
				曝光率：541
			</view>
			<view class="stag">
				转发率：541
			</view>
			<view class="stag">
				成交量：541
			</view>
		</view> -->
		<view class="goods-shop-notice">
			<view class="goods-shop-notice-title">
				联盟活动商家
			</view>
			<view class="goods-shop-notice-text">
				(排名不分先后)
			</view>
			<view class="goods-shop-notice-title">
				点击商家查看活动详情
			</view>
		</view>
		
		<view class="shop-main">
			<view class="shop-title">
				联盟商家
			</view>
			<view class="shop-list" v-for="(item,index) in list">
				<view class="shop-list-top">
					<view class="shop-list-top-logo">
						<image :src="$util.img(item.logo)"></image>
					</view>
					<view class="shop-list-top-name">
						{{item.site_name}}
					</view>
					<view class="shop-list-top-distance">
						{{item.distance}}KM
					</view>
				</view>
				<view class="shop-list-goods">
					<view class="shop-list-goods-left">
						<image :src="$util.img(item.goods_image[0])"></image>
					</view>
					<view class="shop-list-goods-right">
						<view class="shop-list-goods-right-title">
							产品名称：{{item.goods_name}}
						</view>
						<view class="shop-list-right-price">
							产品价格：<text>&yen;{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-title">
			活动详情
		</view>
		<view class="detail-main">
			<rich-text :nodes="data.details"></rich-text>
		</view>
		<view class="detail-bottom">
			<view class="bottom-price">
				<view class="bottom-price-new">
					&yen;{{data.price}}
				</view>
				<view class="bottom-price-old">
					&yen;{{data.original_price}}
				</view>
			</view>
			<view class="bottom-buy" @click="orderCalculate">
				立即购买
			</view>
		</view>
		<ns-payment
			ref="choosePaymentPopup"
			:isBalance="orderPaymentData.isUseBalance"
			:isConsumerCoupon="orderPaymentData.isUseConsumer"
			@useBalance="useBalance"
			@useConsumerCoupon="useConsumerCoupon"
			:isPayPassWord="orderPaymentData.member_account.is_pay_password"
			:balanceDeduct="orderPaymentData.price > 0 && orderPaymentData.member_account.balance > 0 ? balanceDeduct : '0'"
			:consumerCouponDeduct="orderPaymentData.price > 0 && orderPaymentData.member_account.consumer_coupon > 0 ? consumerCouponDeduct : '0'"
			:payMoney="orderPaymentData.moneyNum"
			@confirm="orderPay"
		></ns-payment>
		<view style="position: fixed;top: 30px;right: 20px;" v-if="hasRedbag">
			<circle-progress-bar :pro="ScrollProgress" :start="0" :size="120"  border_back_color="#DDD">
			    <image @click="openrbagbtn"  style="width: 30px;height:39px;margin: auto" :animation="bag1animation" src="https://cskjz.baoliy168.com/public/static/img/bg1.png" mode=""></image>
			    
			</circle-progress-bar> 
		</view>
		<uni-popup ref="redMain" type="center" :custom="true" :mask-click="true">
			<view class="rbag_model" @touchmove.prevent.stop>
			<view class="rbag_con hidden">
				<view class="rbag_top">
					<view class="rbag_top_info">
						<!-- <image class="rbag_logo" :src="$util.img(shop.logo)" mode=""></image> -->
						<!-- <view class="app_name">{{shop.site_name}}</view> -->
						<view class="rbag_tips">送您一个红包</view>
					</view>
				</view>
				<view class="open_rbag_btn" :animation="openbrnanimation" @click="openbtn()">領</view>
			</view>
			<view class="rbag_con">
				<view class="hide_btn" @click.stop="hidebtn">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
			</view>
		</uni-popup>
		<uni-popup ref="RedOpen">
			<!-- 打开红包 -->
			<view class="open_rbag_model"  @touchmove.prevent.stop>
				<image class="rbag_conbg" src="https://oss.tianxiakj.com/openrbag.png"></image>
				<view class="rbag_conbg open_rbag_con">
					<view class="open_title">— 恭喜您获得 —</view>
					<view class="rbag_detail">
						<view class="open_money">
							<countup :num="num" color="#c95948" width='21' height='34' fontSize='40'></countup>
							<view class="danwei">元</view>
						</view>
						<view class="open_tips">已存入钱包，可直接用于购买商品</view>
						<view class="open_tips" style="width: 80%;margin-left: 10%;">如果您分享红包，其他会员领取，您可以获得更多的红包哟</view>
					</view>
					<view class="lookbag_box">
						<view class="lookbag_btn">
							<view class="text" @click.stop="openQuestion()" style="line-height: 40px;background-color: #fff;color: #ffd356;border-radius: 20px;border: 1px solid #ffd356;">答题再领取一个红包</view>
						</view>
						<view class="lookbag_btn">
							<button class="text" open-type="share" style="line-height: 40px;width: 100%;margin: 0;background-color: #ffd356;color: #fff;">分享红包</button>
						</view>
					</view>
					<view class="hide_btn" @click.stop="hideopenbtn()">
						<icon type="cancel" color="#fbd977" size="28" />
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="redQuestion" type="bottom">
			<view class="answer" >
				<view class="answerBox">
					<view class="answer-title">请回答如下问题：{{redbag.question}}</view>
					<view class="answer-body">
						<view class="answer-item" v-for="(item, index) in redbag.answer" :key="index" @click="chooseAnswer(item.value)">{{item.title}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import nsPayment from '@/components/payment/payment.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import countup from '@/components/red-bag/countUp.vue';
	export default {
		components: {
			uniPopup,
			nsPayment,
			countup
		},
		data() {
			return {
				data:[],
				id:0,
				
				list:[],
				viewHeight:0,
				num:0.25,
				bag1animation: {},
				openbrnanimation: {},
				rbagmodelshow: false,
				openrbagmodelshow: false,
				ScrollProgress:0,
				ProgressAll:false,
				redbagShow:false,
				hasRedbag:false,
				innerAudioContext:{},
				redbag:[],
				memberId:0,
				orderPaymentData:{
					member_account:{
						balance:0,
						consumer_coupon:0,
						is_pay_password:''
					},
					isUseConsumer:0,
					isUseBalance:0,
					moneyNum:0,
					price:0,
					balanceNum:0,
					consumerNum:0
				},
			}
		},
		onLoad(option) {
			this.id = option.id
			
		},
		async onShow() {
			await this.getData();
			this.getViewHeight()
			this.imageanimation();
			this.getMemberId();
		},
		computed:{
			// 余额抵扣
			balanceDeduct() {
				if (parseFloat(this.orderPaymentData.member_account.balance).toFixed(2) <= parseFloat(this.orderPaymentData.price).toFixed(2)) {
					return parseFloat(this.orderPaymentData.member_account.balance).toFixed(2);
				} else {
					return parseFloat(this.orderPaymentData.price).toFixed(2);
				}
			},
			// 消费券抵扣
			consumerCouponDeduct() {
				if (parseFloat(this.orderPaymentData.member_account.consumer_coupon).toFixed(2) <= parseFloat(this.orderPaymentData.price).toFixed(2)) {
					return parseFloat(this.orderPaymentData.member_account.consumer_coupon).toFixed(2);
				} else {
					return parseFloat(this.orderPaymentData.price).toFixed(2);
				}
			}
		},
		onPageScroll(e){
			var scrollHeight,self = this;;
			// uni.getSystemInfo({
			// 	success:function(res){
			// 		console.log(res)
			// 		height = res.windowHeight;
			// 	}
			// })
			
				scrollHeight = e.scrollTop;
				
				if(!this.ProgressAll && this.hasRedbag){
					scrollHeight = e.scrollTop;
					
					this.ScrollProgress = scrollHeight/this.viewHeight
					if(this.ScrollProgress>0.95){
						this.ScrollProgress = 0.9999;
						this.ProgressAll = true;
						self.innerAudioContext = uni.createInnerAudioContext();
						self.innerAudioContext.autoplay = false;
						self.innerAudioContext.src = 'https://bkjz.baoliy168.com/public/static/audio/red.mp3';
						self.innerAudioContext.onPlay(() => {
						  console.log('开始播放');
						});
						self.innerAudioContext.onError((res) => {
						  console.log(res.errMsg);
						  console.log(res.errCode);
						});
						if(this.redbag.time==0){
							this.$refs.redMain.open();
						}else if(this.redbag.time==1){
							this.$refs.redQuestion.open();
						}
					}
				}
			
			
		},
		methods: {
			/**使用消费券*/
			useConsumerCoupon(){
				if (this.orderPaymentData.isUseConsumer) this.orderPaymentData.isUseConsumer = 0;
				else this.orderPaymentData.isUseConsumer = 1;
				this.orderCalculate();
				this.$forceUpdate();
			},
			useBalance() {
				if (this.orderPaymentData.isUseBalance) this.orderPaymentData.isUseBalance = 0;
				else this.orderPaymentData.isUseBalance = 1;
				this.orderCalculate();
				this.$forceUpdate();
			},
			orderCalculate(){
				var that = this,id = that.id,orderPaymentData = that.orderPaymentData;
				that.$api.sendRequest({
					url:'/alliance/api/order/calculate',
					data:{
						id:id,
						orderPaymentData:JSON.stringify(orderPaymentData)
					},
					success:function(res){
						if (res.code >= 0) {
							that.orderPaymentData.isUseBalance = parseInt(res.data.isUseBalance)
							that.orderPaymentData.isUseConsumer = parseInt(res.data.isUseConsumer)
							that.orderPaymentData.moneyNum = parseFloat(res.data.moneyNum)
							that.orderPaymentData.member_account.balance = parseFloat(res.data.balance)
							that.orderPaymentData.price = parseFloat(res.data.price)
							that.orderPaymentData.balanceNum = parseFloat(res.data.balanceNum)
							that.orderPaymentData.consumerNum = parseFloat(res.data.consumerNum)
							that.orderPaymentData.member_account.consumer_coupon = parseFloat(res.data.consumer_coupon)
							that.$refs.choosePaymentPopup.open();
							// that.$forceUpdate()
						}
					}
				})
			},
			openrbagbtn(){
				var that = this,redbag = that.redbag;
				if(!that.ProgressAll) return false;
				if(redbag.time == 0){
					that.$refs.redMain.open();
				}else if(redbag.time==1){
					that.$refs.redQuestion.open();
				}
			},
			getMemberId() {
				this.$api.sendRequest({
					url: "/api/member/id",
					success: res => {
						if (res.code >= 0) {
							this.memberId = res.data;
						}
					}
				});
			},
			orderPay(){
				var that = this,id = that.id;
				that.$api.sendRequest({
					url: '/alliance/api/order/create',
					data: {
						id:that.id,
						orderPaymentData:JSON.stringify(that.orderPaymentData)
					},
					success(res){
						if(res.code == 0){
							if (that.orderPaymentData.moneyNum == 0) {
								that.$util.redirectTo('/mainpages/pay/result/result', {
									code: res.data
								}, 'redirectTo');
							} else {
								that.$refs.choosePaymentPopup.getPayInfo(res.data);
							}
							// that.$refs.choosePaymentPopup.getPayInfo(res.data);
						}
						
					}
				})
				// that.$refs.redMain.open();
				// that.$refs.choosePaymentPopup.open();
				
			},
			chooseAnswer(index) {
				var that = this;
				
				var suid = uni.getStorageSync("suid")
				if (suid > 0) {
					this.suid = suid
				}
				that.$api.sendRequest({
					url: '/redbag/api/RedBag/receive',
					data: {
						id: that.redbag.id,
						type: 2,
						recommend: that.suid,
						answer:index
					},
					success: res => {
						if (res.code >= 0) {
							that.$refs.redQuestion.close();
							that.hasRedbag = false;
						}
						uni.showToast({
							title: res.data,
							icon: "none",
							mask: true,
							duration: 1000
						})
					}
				})
			},
			openQuestion(){
				this.$refs.redQuestion.open();
			},
			getData(){
				var that = this;
				var res = uni.getStorageSync('location');
				that.$api.sendRequest({
					url: '/alliance/api/index/detail',
					data: {
						latitude:res.latitude,
						longitude:res.longitude,
						id:that.id
					},
					success(res){
						that.data = res.data;
						that.list = res.list.list;
						that.redbag = res.data.redbag;
						if(res.data.redbag && res.data.redbag.time < 2){
							that.hasRedbag = true;
						}
						
					}
				})
			},
			imageanimation() {
				var that = this;
				var next = true;
				var animation = uni.createAnimation({
					duration: 100,
					timingFunction: 'ease',
				})
				that.bag1animation = animation
				setInterval(function() {
					if (next) {
						animation.rotate(36).step();
						animation.rotate(6).step();
						animation.rotate(36).step();
						animation.rotate(6).step();
						next = !next;
					} else {
						next = !next;
					}
					that.bag1animation = animation.export()
				}, 1100)
			},
			submit(){
				var that = this,id = that.id;
				that.$api.sendRequest({
					url: '/alliance/api/order/create',
					data: {
						id:that.id
					},
					success(res){
						that.orderPaymentData.member_account = res.data.member_account.member_account
						that.out_trade_no = res.data
						if(res.code == 0){
							// that.$api.sendRequest({
							// 	url:'/alliance/api/order/pay',
							// 	data:{
							// 		out_trade_no:res.data
							// 	},
							// 	success:function(d){
							// 		that.orderPaymentData = d.data
									that.$refs.choosePaymentPopup.open();
							// 	}
							// })
						}
						
					}
				})
				// that.$refs.redMain.open();
				// that.$refs.choosePaymentPopup.open();
			},
			//隐藏红包
			hidebtn(){
				this.$refs.redMain.close()
			},
			openbtn(){
				var that = this;
				
				var suid = uni.getStorageSync("suid")
				
				that.$api.sendRequest({
					url: '/redbag/api/RedBag/receive',
					data: {
						id: that.redbag.id,
						type: 1,
						recommend: suid
					},
					success: res => {
						if (res.code >= 0) {
				            that.innerAudioContext.play();
							var animation = uni.createAnimation({
								duration: 1000,
								timingFunction: 'ease',
							})
							that.openbrnanimation = animation;
							animation.rotateY(360).step();
							that.openbrnanimation = animation.export();
							setTimeout(function() {
								that.rbagmodelshow = false;
								that.openrbagmodelshow = true;
								that.openbrnanimation = {};
							}, 1000);
							that.num = that.redbag.each_money
						} else {
							uni.showToast({
								title: res.message,
								icon: "none",
								mask: true,
								duration: 1000
							})
						}
					}
				})
				this.$refs.redMain.close();
				this.$refs.RedOpen.open();
			},
			//获取页面高度
			getViewHeight(){
				 var _this=this
				            uni.getSystemInfo({
				                success:(resu)=>{
				                    _this.height=resu.windowHeight+'px'
				                    const query = uni.createSelectorQuery()
				                    query.select('#view').boundingClientRect()
				                    query.selectViewport().scrollOffset()
				                    query.exec(function(res){
				                        res[0].top       // #the-id节点的上边界坐标
				                        res[1].scrollTop // 显示区域的竖直滚动位置
				                        _this.viewHeight=res[1].scrollHeight
				                    })
				                },
				                fail:(res)=>{}
				            })
			},
			onShareAppMessage(res) {
				var path = '/otherpages/detail/detail?id=' + this.id;
				var title = this.data.describe;
				if (this.memberId) path += '&suid=' + this.memberId;
				return {
					title: title,
					imageUrl: this.$util.img(this.data.picture),
					path: path,
					success: res => {},
					fail: res => {}
				};
			},
		}
	}
</script>

<style>
	.header{
		width: 750rpx;
		height: 750rpx;
	}
	.header image{
		width: 750rpx;
		height: 750rpx;
	}
	.title{
		width: 690rpx;
		padding: 30rpx;
		display: flex;
	}
	.title-left{
		flex: 1;
	}
	.goods-title{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		line-height: 60rpx;
	}
	.goods-money{
		display: flex;
	}
	.goods-price{
		color: #FF5454;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 60rpx;
	}
		
	.goods-price-old{
		color: #999999;
		font-size: 24rpx;
		line-height: 60rpx;
		margin-left: 20rpx;
		text-decoration: line-through;
	}
	.title-share{
		text-align: center;
		
	}
	.title-share image{
		width: 60rpx;
		height: 60rpx;
	}
	.title-share view{
		color: #999999;
		font-size: 24rpx;
		line-height: 40rpx;
	}
	.goods-time{
		width: 690rpx;
		padding: 0 30rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #999999;
	}
	.goods-time text{
		color: #FF5454;
	}
	.goods-stag{
		width: 690rpx;
		padding: 0 30rpx;
		display: flex;
	}
	.stag{
		flex: 1;
		font-size: 24rpx;
		color: #999999;
		line-height: 60rpx;
		text-align: center;
	}
	.goods-shop-notice{
		width: 690rpx;
		padding: 0 30rpx;
		text-align: center;
	}
	.goods-shop-notice-title{
		font-size: 28rpx;
		color: #FF5454;
		font-weight: bold;
	}
	.goods-shop-notice-text{
		font-size: 24rpx;
		color: #FF5454;
	}
	.shop-title{
		background: linear-gradient(0deg,#fe5142 0%, #ffd008 100%);
		/* border-radius: 6px; */
		box-shadow: 0.17px 2.49px 19px 2.5px rgba(255,15,35,0.23); 
		color: #fff;
		text-align: center;
		width: 375rpx;
		margin: auto;
		line-height: 80rpx;
		position: relative;
		top: -50rpx;
	}
	.shop-title::before{
		width:10px;
		height:10px;
		border:10px solid transparent;/*以下四个样式对应四种三角形，任选其一即可实现*/
		/* border-top-color:lightseagreen; */
		border-left-color:#fe5142;
		/* border-right-color:lightseagreen; */
		/* border-bottom-color:lightseagreen; */
		
	}
	.shop-title::after{
		width:10px;
		height:10px;
		border:10px solid transparent;/*以下四个样式对应四种三角形，任选其一即可实现*/
		/* border-top-color:lightseagreen; */
		border-right-color:#fe5142;
		/* border-right-color:lightseagreen; */
		/* border-bottom-color:lightseagreen; */
		
	}
	.shop-main{
		width: 650rpx;
		margin: 50rpx 30rpx 0 30rpx;
		background-color: #FFF9EF;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	.shop-list{
		width: 610rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin: 20rpx 0;
	}
	.shop-list-top{
		display: flex;
		height: 100rpx;
	}
	.shop-list-top-logo image{
		width: 60rpx;
		margin-top: 20rpx;
		height: 60rpx;
		border-radius: 100%;
	}
	.shop-list-top-name{
		line-height: 100rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
		flex: 1;
	}
	.shop-list-top-distance{
		line-height: 100rpx;
		font-size: 24rpx;
		color:#FF5454;
	}
	.shop-list-goods{
		display: flex;
	}
	.shop-list-goods-left image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.shop-list-goods-right{
		margin-left: 20rpx;
	}
	.shop-list-goods-right-title{
		font-size: 28rpx;
		color: #333333;
		line-height: 60rpx;
	}
	.shop-list-right-price{
		font-size: 28rpx;
		color: #333333;
		line-height: 60rpx;
	}
	.shop-list-right-price text{
		color: #FF5454;
	}
	.detail-title{
		width: 750rpx;
		text-align: center;
		line-height: 100rpx;
		color: #333333;
		font-weight: bold;
	}
	.detail-main{
		margin-bottom: 100rpx;
	}
	.detail-bottom{
		position: fixed;
		bottom: 0;
		width: 690rpx;
		padding: 0 30rpx;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
	}
	.bottom-price{
		display: flex;
		flex: 1;
	}
	.bottom-price-new{
		font-size: 28rpx;
		color: #FF4747;
		font-weight: bold;
		line-height: 100rpx;
	}
	.bottom-price-old{
		font-size: 28rpx;
		color: #999999;
		line-height: 100rpx;
		margin-left: 20rpx;
	}
	.bottom-buy{
		line-height: 80rpx;
		height: 80rpx;
		margin-top: 10rpx;
		padding: 0 40rpx;
		background: linear-gradient(0deg,#fe4747 0%, #ffd008 100%);
		color: #ffffff;
		border-radius: 40rpx;
	}
	.rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.3);
		z-index: 1000;
		
		
	}
	.hidden {
		overflow: hidden;
	}
	.rbag_con {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 80%;
		height: 840upx;
		background-color: #da4d44;
		margin: auto;
		border-radius: 14upx;
		box-shadow: 0upx 0upx 10upx rgba(0,0,0,0.2);
		
		
	}
	.open_rbag_btn {
		position: absolute;
		top: 450upx;
		left: 0;
		right: 0;
		width: 180upx;
		height: 180upx;
		line-height: 180upx;
		border-radius: 50%;
		margin: 0 auto;
		text-align: center;
		background-color: #ffd287;
		font-size: 55upx;
		color: #fef5e8;
		box-shadow: 2upx 2upx 6upx rgba(0,0,0,0.2);
		z-index: 1002;
	}
	.hide_btn {
		position: absolute;
		bottom: -110upx;
		left: 0;
		right: 0;
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 0 auto;
	}
	.rbag_top {
		position: absolute;
		left: -20%;
		top: 0;
		width: 140%;
		height: 540upx;
		background-color: #e0534a;
		border-radius: 0 0 50% 50%;
		box-shadow: 0 0 14upx rgba(0,0,0,0.4);
		z-index: 1001;
		
	}
	.rbag_top_info {
		margin-top: 60upx;
		
	}
	.rbag_logo {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
		overflow: hidden;
	}
	.app_name {
		font-size: 50upx;
		color: #edddd3;
		text-align: center;
		margin-top: 34upx;
		letter-spacing: 1upx;
	}
	.rbag_tips {
		font-size: 36upx;
		color: #edddd3;
		text-align: center;
		letter-spacing: 1upx;
	}
	// 打开红包
	.open_rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.3);
		z-index: 1000;
		
		
	}
	.rbag_conbg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 80%;
		height: 840upx;
		margin: auto;
		z-index: 1001;
	}
	.open_rbag_con {
		z-index: 1002;
		
		
		
	}
	.open_title {
		height: 120upx;
		line-height: 120upx;
		text-align: center;
		font-size: 38upx;
		letter-spacing: 2upx;
		color: #e46965;
	}
	
	.rbag_detail {
		// margin-top: 90upx;
		
		
	}
	.open_money {
		text-align: center;
		font-size: 80upx;
		color: #c95948;
		font-weight: bold;
		display: flex;
		justify-content: center;
		
	}
	.danwei {
		font-size: 30upx;
		margin-left: 16upx;
		margin-top: 24upx;
	}
	.hide_btn {
		position: absolute;
		bottom: -110upx;
		left: 0;
		right: 0;
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 0 auto;
	}
	.btn {
		background: none;
	}
	.lookbag_btn {
		width: 70%;
		text-align: center;
		font-size: 32upx;
		height: 40px;
		color: #c95948;
		letter-spacing: 2upx;
		background-color: #ffd356;
		border-radius: 50upx;
		box-shadow: 0upx 0upx 4upx rgba(0,0,0,0.2);
		margin: 10upx 0;
		
	}
	.lookbag_box {
		margin-top: 100upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.open_tips {
		text-align: center;
		font-size: 28upx;
		color: #d26762;
		margin-top: 30upx;
	}
	.answer {
		/* position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.3); */
		z-index: 1000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.answerBox {
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFF;
		
		
	}
	.answer-title {
		font-size: 32upx;
		font-weight: 600;
		padding: 20upx;
	}
	.answer-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30upx;
		
	}
	.answer-item {
		border-radius: 30upx;
		border: 1upx solid #f1f1f1;
		padding: 20upx 200upx;
		margin: 20upx 0;
	}
</style>
